<template>
  <popup ref="refPopup" @event="closePopup">
    <div class="update-user" v-if="userInfo">

      <div v-show="step == 1" class="update-content">
        <header>
          <h3>修改信息️</h3>
        </header>
        <section>
          <dl>
            <dt>分数</dt>
            <dd>
              <el-input
                type='text'
                @blur="getPosition"
                v-model="userInfo.score" placeholder="请输入分数"></el-input>
            </dd>
          </dl>
          <dl>
            <dt>位次</dt>
            <dd>
              <el-input
                type='text'
                v-model="userInfo.position" placeholder="请输入位次"></el-input>
            </dd>
          </dl>
          <dl>
            <dt>文理科</dt>
            <dd class="radio-style">
              <el-radio-group v-model="userInfo.scienceArt" @change='bindScienceArt'>
                <el-radio label="理科">理科</el-radio>
                <el-radio label="文科">文科</el-radio>
              </el-radio-group>
            </dd>
          </dl>
        </section>
        <footer>
          <button @click="bindStep1">确认修改</button>
        </footer>
      </div>

      <div v-show="step == 2" class="update-content">
        <header>
          <h3>⚠️确认您的信息⚠️</h3>
        </header>
        <section>
          <ul>
            <li>分数<em>{{userInfo.score}}</em></li>
            <li>位次<em>{{userInfo.position}}</em></li>
            <li>分数<em>{{userInfo.scienceArt}}</em></li>
          </ul>
        </section>
        <footer>
          <button @click="bindStep2" :disabled="this.s === 0?false:true">确认信息无误<i v-show="this.s != 0">({{this.s}}S)</i></button>
          <!-- <button @click="bindStep2">确认信息无误({{this.s}}S)</button> -->
          <span @click="returnStep(1)">返回重新填写</span>
        </footer>
      </div>

      <div v-show="step == 3" class="update-content">
        <header>
          <h3>⚠️确认您的信息⚠️</h3>
        </header>
        <section>
          <p>{{formatDate(data.startTime, 'yyyy年M月d日')}}至{{formatDate(data.endTime, 'yyyy年M月d日')}}期间为高考志愿填报时间，仅能修改{{data.editCnt}}次信息，请谨慎填写，保证数据真实！</p>
        </section>
        <footer>
          <button @click="bindStep3" :disabled="this.s === 0?false:true">确认信息无误<i v-show="this.s != 0">({{this.s}}S)</i></button>
          <!-- <button @click="bindStep3">确认信息无误({{this.s}}S)</button> -->
          <span @click="returnStep(2)">返回重新填写</span>
        </footer>
      </div>

    </div>
  </popup>
</template>
<script>
import { mapState } from 'vuex'
import { formatDate, api } from '@/utils'
var _time
export default {
  data () {
    return {
      step: 1,
      data: '',
      userInfo: '',
      formatDate,
      s: 5,
      text: '正在加载数据...',
      // 初始
      // data: {},
      // userInfo: {}, // 用户信息
      isResult: 0,
      notProvide: false, // 是否支持该省份
      select: ''
    }
  },
  created () {
  },
  computed: {
    ...mapState({
      // firstCome: 'firstCome',
      realUserInfo: 'userInfo'
    })
  },
  methods: {
    init (data, userInfo) {
      this.step = 1
      this.data = data
      this.userInfo = this.lodash.cloneDeep(userInfo)
      this.$refs.refPopup.init()
    },
    // 获取位次
    getPosition () {
      let _params = {
        score: this.userInfo.score,
        scienceArt: this.userInfo.scienceArt,
        provinceId: this.realUserInfo.province.id
      }
      this.$axios.get(api.getPosition, {params: _params}).then(data => {
        if (data) {
          this.userInfo.position = data
        }
      })
    },
    bindScienceArt (msg) {
      this.userInfo.scienceArt = msg
      this.getPosition()
    },
    saveData () {
      this.$axios.post(api.saveOrUpdateScore, {
        id: this.userInfo ? this.userInfo.id : '',
        scienceArt: this.userInfo.scienceArt,
        score: this.userInfo.score,
        province: {
          id: this.realUserInfo.province.id
        },
        position: this.userInfo.position
      }).then(data => {
        this.$message.success('修改成功')
      })
    },
    bindStep1 () {
      if (this.save()) {
        this.step = 2
        this.countDown()
      }
    },
    getLocalTime (nS) {
      let _t = new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')
      let _r = _t.split(' ')[0]
      let oldTime = (new Date(_r)).getTime() / 1000
      return oldTime
    },
    bindStep2 () {
      let _today = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      // let _startTime = this.getLocalTime(this.data.startTime)
      // let _endTime = this.getLocalTime(this.data.endTime)
      let _startTime = this.data.startTime
      let _endTime = this.data.endTime
      // console.log('this.data', this.data)
      // console.log('_today', _today)
      // console.log('_startTime', _startTime)
      // console.log('_endTime', _endTime)
      // 高考期间只能修改1次，需要提示，其他时间直接保存
      if (!this.userInfo.isSuperUser && _today >= _startTime && _today <= _endTime && this.userInfo.modifyTimes < this.data.editCnt) {
        this.step = 3
        this.countDown()
      } else {
        this.saveData()
        this.$refs.refPopup.init(false)
        this.$emit('event', this.userInfo)
      }
      // clearInterval(time)
    },
    bindStep3 () {
      this.saveData()
      this.$refs.refPopup.init(false)
      this.$emit('event', this.userInfo)
    },
    // 倒数5S
    countDown () {
      this.s = 5
      _time = setInterval(() => {
        this.s = this.s - 1
        if (this.s === 0) {
          clearInterval(_time)
        }
      }, 1000)
    },
    save () {
      // 0-50万
      // 若不是体验用户，进行一系列判断
      this.popTime = 5
      let _order = this.userInfo.position + ''
      let _score = this.userInfo.score + ''
      let score = _score.trim()
      let order = _order.trim()
      let reg = /^[0-9]*$/
      // 校验
      if (!score.length) {
        this.$message.warning('请输入您的分数！')
        return false
      }
      if (!order.trim().length) {
        this.$message.warning('请输入您的位次！')
        return false
      }
      if (score > 1000) {
        this.$message.warning('您输入的分数太高了！')
        return false
      }
      if (order > 500000) {
        this.$message.warning('您输入的位次太高了！')
        return false
      }
      if (!(reg.test(score) && reg.test(order))) {
        this.$message.error('温馨提示，分数和位次都是正整数哦！')
        return false
      }
      return true
    },
    returnStep (step) {
      this.step = step
      this.s = 0
      clearInterval(_time)
    },
    closePopup () {
      clearInterval(_time)
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .radio-style{
  .el-radio-group{
    width:180px;
  }
  .el-radio__inner{
    width:20px; height:20px;
    border-color:#69707F;
    background:transparent;
    &:after{
      width:20px; height:20px;
      content:"✔";
      text-align:center;
      line-height:20px;
      color:$light;
      background:$positive;
      // border-color:$positive;
    }
  }
  .el-radio__input.is-checked+.el-radio__label{
    color:$positive;
  }
}
.update-user{
  width: 310px; height: 330px;
  background: $light;
  border-radius:10px;
  padding: 0 28px;
  .update-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    height:100%;
    >header{
      width:100%;
      height:80px;
      display:flex;
      align-items:center;
      justify-content: center;
      h3{
        font-weight: normal;
        font-size: 20px;
      }
    }
    >section{
      width:100%;
      flex:1;
      font-size:16px;
      color:#69707F;
      // 填分数，位次
      dl{
        display:flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom:10px;
      }
      // 提示确认
      ul{
        text-align:center;
        li{
          height:28px; line-height:28px;
          em{
            display:inline-block;
            text-align:left;
            min-width:60px;
            margin-left:30px;
          }
        }
      }
      // 提示时间
      p{
        line-height: 22px;
      }
    }
    >footer{
      width:100%;
      height:110px; text-align:center;
      button{
        width:100%;
        height:50px; line-height:50px;
        border-radius:10px;
        border:none;
        color:#FFF;
        background:$table-b;
        padding:0px;
      }
      span{
        display:inline-block;
        margin-top:12px;
        height:28px; line-height:28px;
        color:$table-b;
        cursor: pointer;
      }
    }
  }
}
</style>
